<template>
  <!-- 整体内容盒子 -->
  <div class="content-box">
    <!-- 注册盒子 -->
    <div class="register-box">
      <!-- 表单盒子 -->
      <div class="title-box">
        <!-- 表单头部 -->
        <div class="title-header">
          <img src="../../assets/images/login_title.png" alt="" />
        </div>
        <!-- 表单内容 -->
        <div class="title-content">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="username">
              <el-input
                placeholder="请输入用户名"
                v-model="form.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="form.password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="repassword">
              <el-input
                type="password"
                placeholder="请再次确认密码"
                v-model="form.repassword"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-register" type="primary" @click="registerFn"
                >注册</el-button
              >
              <el-link type="info" @click="$router.push('/login')"
                >去登录</el-link
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { registerApi } from '@/utils/api'
export default {
  name: 'Use-Register',
  data() {
    const samePwFn = (rules, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }

    return {
      form: {
        username: '',
        password: '',
        repassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: '用户名必须是1-10为英文数字组成',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符组成',
            trigger: 'blur'
          }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            validator: samePwFn,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    registerFn() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 通过校验
          console.log(this.form)
          const { data: res } = await registerApi(this.form)
          console.log(res)
          if (res.code !== 0) return this.$message.error(res.message)
          this.$message.success(res.message)
          this.$router.push('/login')
        } else return false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  background-image: url('../../assets/images/login_bg.jpg');
  background-position-y: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  .register-box {
    width: 400px;
    height: 340px;
    background-color: #fff;
    margin: auto;
    border-radius: 5px;
    .title-box {
      width: 85%;
      height: 100%;
      margin: 20px auto 0;
      .title-header {
        width: 100%;
        text-align: center;
      }
      .title-content {
        margin-top: 15px;
        .btn-register {
          width: 100%;
        }
      }
    }
  }
}
</style>
